<template>
    <el-form
        ref="useFormRef"
        :label-position="labelPosition"
        :label-width="labelW"
        :model="formModel"
        :size="size"
        :rules="rules"
        class="use-form"
    >
        <el-row :gutter="20">
            <template 
                v-for="item in formData"
            >
                <el-col
                    v-if="hideItem(item)"
                    :key="item.prop"
                    :span="item.span || 24"
                >
                    <el-form-item
                        :label-width="item.isFormItem ? '0' : labelW"
                        :label="item.isFormItem ? '' : item.label"
                        :prop="item.prop"
                    >
                        <slot
                            v-if="item.eType === 'Slot'"
                            :name="item.slotName"
                            :data="{ ...item, ...formModel }"
                            :slot-form="formModel"
                        />
                        <form-module-form-index
                            v-else
                            :item="item"
                            :readonly="readonly"
                            :disabled="disabled"
                            :form-data="formModel"
                            :options-key="item.optionsKey"
                            @event="event"
                        />
                    </el-form-item>
                </el-col>
            </template>
        </el-row>
        <!-- 提交按钮 -->
        <el-form-item>
            <slot name="footer">
                <button-list
                    :but-list="butList"
                    @handle-but-click="handleButClick"
                />
            </slot>
        </el-form-item>
    </el-form>
</template>

<script setup name="formModule">
import { computed, reactive, toRefs } from 'vue'
const props = defineProps({
    labelPosition: {
        type: String,
        default: 'right'
    },
    labelW: {
        type: String,
        default: '100px'
    },
    formModel: {
        type: Object,
        default: () => ({})
    },
    formData: {
        type: Array,
        default: () => []
    },
    size: {
        type: String,
        default: 'default'
    },
    rules: {
        type: Object,
        default: () => ({})
    },
    buttonList: {
        type: Array,
        default: () => []
    },
    readonly: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    },
    butList: {
        type: Array,
        default: () => [
            {
                type: 'default',
                text: '重置',
                emit: 'resetForm'
            },
            {
                type: 'primary',
                text: '确定',
                emit: 'submitForm'
            }
        ]
    }
})
const emit = defineEmits([ 'event', 'submit' ])
const state = reactive({
    useFormRef: null
})

const event = (params) => {
    emit('event', params)
}
const handleButClick = (item) => {
    item.emit && butClickName[item.emit]()
}
const submitForm = () => {
    state.useFormRef.validate((valid) => {
        if(valid) {
            props.formData.forEach((item) => {
                if(item.hiddenItem && item.isShow === false) {
                    delete props.formModel[item.prop]
                }
            })
            emit('submit', props.formData)
        }
    })
}
//重置
const resetForm = () => {
    state.useFormRef.resetFields()
}

const butClickName = {
    submitForm,
    resetForm
}
//联动隐藏
const hideItem = computed(()=> {
    return (item) => {
        let isShow = true
        const formModel = props.formModel
        if(item.hiddenItem){
            const _hiddenItem = item.hiddenItem
            for (const key in _hiddenItem) {
                const _item = _hiddenItem[key]
                if(typeof formModel[key] == 'object') {
                    if(formModel[key].length === 0) {
                        isShow = false
                        break
                    }
                    for (const item of _item) {
                        const isReal = formModel[key].some(y => y == item)
                        if(isReal) {
                            isShow = !isReal
                            break
                        }
                    }
                } else {
                    const isReal = _item.some(y => y == formModel[key])
                    if(isReal) {
                        isShow = !isReal
                        break
                    }
                }
            }
            item.isShow = isShow
            return isShow
        } else {
            return true
        }
    }
})
const { useFormRef } = toRefs(state)
defineExpose({
    useFormRef
})
</script>

<style lang="scss" scoped>
.use-form {
  overflow: hidden;
}
</style>
